<template>
  <div class="dialog-mask" v-if="visible" @click.self="close">
    <div class="dialog-container">
      <!-- 弹窗头部 -->
      <div class="dialog-header">
        <h2>{{ project.name }} 项目详情</h2>
        <button class="close-btn" @click="close">×</button>
      </div>

      <!-- 弹窗内容 -->
      <div class="dialog-body">
        <!-- 基本信息 -->
        <div class="info-section">
          <div class="info-item">
            <label>起止日期：</label>
            <span>{{ project.startDate }} 至 {{ project.endDate }}</span>
          </div>
          <div class="info-item">
            <label>当前进度：</label>
            <progress-bar :progress="project.progress" />
          </div>
        </div>

        <!-- 进度管理 -->
        <section class="section">
          <h3>进度管理</h3>
          <div class="progress-control">
            <input
              type="range"
              v-model.number="localProgress"
              min="0"
              max="100"
              class="progress-slider"
            />
            <div class="progress-actions">
              <span class="progress-value">{{ localProgress }}%</span>
              <button @click="updateProgress">更新进度</button>
            </div>
          </div>
        </section>

        <!-- 施工日志 -->
        <section class="section">
          <h3>施工日志</h3>
          <div class="log-form">
            <textarea
              v-model="newLogContent"
              placeholder="输入新的日志内容"
              rows="3"
            ></textarea>
            <button @click="addLog">添加日志</button>
          </div>
          <div class="log-list">
            <div v-for="log in project.logs" :key="log.id" class="log-item">
              <div class="log-header">
                <span class="log-date">{{ log.date }}</span>
                <span
                  :class="['log-status', log.resolved ? 'resolved' : 'pending']"
                >
                  {{ log.resolved ? '已解决' : '待处理' }}
                </span>
              </div>
              <p class="log-content">{{ log.activity }}</p>
              <div v-if="log.issues" class="log-issues">
                问题记录：{{ log.issues }}
              </div>
            </div>
          </div>
        </section>

        <!-- 预算管理 -->
        <section class="section">
          <h3>预算管理</h3>
          <div class="budget-grid">
            <div class="budget-item">
              <label>初始预算：</label>
              <span>¥{{ project.budget.initial.toLocaleString() }}</span>
            </div>
            <div class="budget-item">
              <label>实际支出：</label>
              <span>¥{{ project.budget.actual.toLocaleString() }}</span>
            </div>
            <div class="budget-item">
              <label>预算偏差：</label>
              <span :class="varianceClass">
                ¥{{ variance.toLocaleString() }}
              </span>
            </div>
          </div>
          <div class="budget-adjustment">
            <input
              type="number"
              v-model.number="adjustmentAmount"
              placeholder="输入调整金额"
            />
            <button @click="adjustBudget">调整预算</button>
          </div>
        </section>
        <!-- 巡检记录 -->
        <div class="section">
          <h3>巡检记录</h3>
          <div class="inspection-list">
            <div
              v-for="task in inspections"
              :key="task.id"
              class="inspection-item"
            >
              <div class="task-header">
                <span class="task-name">{{ task.name }}</span>
                <el-tag :type="taskStatusType(task.status)">
                  {{ task.status }}
                </el-tag>
              </div>
              <div class="task-meta">
                <span>负责人：{{ task.assignees.join(', ') }}</span>
                <span>截止时间：{{ formatDate(task.dueDate) }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 问题列表 -->
        <div class="section">
          <h3>待处理问题</h3>
          <div class="issue-list">
            <div
              v-for="issue in pendingIssues"
              :key="issue.id"
              class="issue-item"
            >
              <div class="issue-header">
                <span class="issue-type">{{ issue.typeLabel }}</span>
                <severity-badge :level="issue.severity" />
              </div>
              <p class="issue-desc">{{ issue.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import ProgressBar from './ProgressBar.vue'
import { useProjectStore } from '@/stores/project'

export default {
  components: { ProgressBar },
  props: {
    visible: Boolean,
    projectId: Number
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    const projectStore = useProjectStore()
    const localProgress = ref(0)
    const newLogContent = ref('')
    const adjustmentAmount = ref(0)

    const inspections = computed(() =>
      projectStore.inspections.filter((i) => i.projectId === props.projectId)
    )
    const pendingIssues = computed(() =>
      projectStore.issues.filter(
        (i) => i.projectId === props.projectId && i.status === '待处理'
      )
    )
    // 获取当前项目数据
    const project = computed(() =>
      projectStore.projects.find((p) => p.id === props.projectId)
    )

    // 预算偏差计算
    const variance = computed(
      () => project.value.budget.actual - project.value.budget.initial
    )

    // 预算偏差样式
    const varianceClass = computed(() => ({
      positive: variance.value > 0,
      negative: variance.value < 0
    }))

    // 关闭弹窗
    const close = () => {
      emit('update:visible', false)
    }

    // 更新进度
    const updateProgress = () => {
      projectStore.updateProgress(props.projectId, localProgress.value)
    }

    // 添加日志
    const addLog = () => {
      if (newLogContent.value.trim()) {
        projectStore.addLog(props.projectId, {
          activity: newLogContent.value,
          issues: '',
          resolved: false
        })
        newLogContent.value = ''
      }
    }

    // 调整预算
    const adjustBudget = () => {
      if (adjustmentAmount.value !== 0) {
        projectStore.adjustBudget(props.projectId, {
          amount: adjustmentAmount.value,
          date: new Date().toISOString().split('T')[0],
          reason: '预算调整'
        })
        adjustmentAmount.value = 0
      }
    }

    return {
      project,
      localProgress,
      newLogContent,
      adjustmentAmount,
      variance,
      varianceClass,
      close,
      updateProgress,
      addLog,
      adjustBudget,
      pendingIssues,
      inspections
    }
  }
}
</script>

<style scoped>
.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-container {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
}

.dialog-body {
  padding: 20px;
}

.section {
  margin-bottom: 30px;
}

.info-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.progress-control {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-slider {
  width: 100%;
  margin: 10px 0;
}

.progress-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.log-list {
  max-height: 300px;
  overflow-y: auto;
}

.log-item {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
}

.budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.positive {
  color: #27ab83;
}
.negative {
  color: #e63757;
}

button {
  padding: 8px 16px;
  background: #2c7be5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  opacity: 0.9;
}
</style>
